<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include  file="/jsps/common/taglibs.jsp" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title></title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
      <style type="text/css">
          body,div,form,table,tr,td,span{
              padding:0px;
              margin:0px;
          }
          body{
              background-image: url("<c:url value="/img/client/hosi7.gif"/>");
          }
          div.frame_div{
              width:380px;
              height:220px;
              border:1px solid red;
              padding:10px;
              text-align:center;
          }
          td.title{
              text-align: right;
          }
          div.error_info{
              width:200px;
              height:20px
              border:1px solid red;
              color:red;
          }
      </style>
      <script type="text/javascript" src="<c:url value="/js/jquery.js"/>"></script>
      <script type="text/javascript">
          
          $(document).ready(function(){
              
              setPosition();
              
              //浏览器窗口发生改变的时候,再进行一次位置设置
              $(window).resize(function(){
                  setPosition();
              });
              
          });
          
          //设置登入窗口的位置
          function setPosition(){
          
              //获取窗口及登入窗口的宽度和高度
              var windowWidth=$(window).innerWidth();
              var windowHeight=$(window).innerHeight();
              var frameWidth=$(".frame_div").width();
              var frameHeight=$(".frame_div").height();
              
              //设置登入框口的位置
              var setLeft=(windowWidth-frameWidth)/2;
              var setTop=(windowHeight-frameHeight)/2;
              
              $(".frame_div").css("position","absolute").css("top",setTop).css("left",setLeft);
              
          }
          
          //提交信息时进行信息验证
          function login_check(){
              
              with(document.forms[0]){
                  
                  if(user_name.value==""){
                      alert("请检查用户名!");
                      document.getElementsByName("user_name")[0].select();
                      return false;
                  }
                  if(user_pwd.value==""){
                      alert("请检查密码!");
                      document.getElementsByName("user_pwd")[0].select();
                      return false;
                  }
                  if(checked_code.value.length!=4){
                      alert("请检查验证码!");
                      document.getElementsByName("checked_code")[0].select();
                      return false;
                  } 
                  
              }
              
              //通过验证,提交表单
              document.forms[0].submit();
              
          }
          
          //更改验证码
          function changePic(){
              var d=new Date();
              document.getElementById("code").src="<c:url value="/clientSecurityMgr?act=genCode"/>"+"&time="+d.getTime();
          }
          
      </script>
  </head>
  
  <body>
      <div id="wrapper_div">
        <div class="frame_div" style="background-color:#FFFFCC">
            <form class="content_form" action="<c:url value="/clientSecurityMgr"/>" method="post">
                <input type="hidden" name="act" value="login"/>
                <br/>
                <table class="login_info_table">
                    <tr>
                        <td class="title">用户名:</td>
                        <td class="content"><input type="text" name="user_name" value="${userName}"/></td>
                    </tr>
                    <tr>
                        <td class="title">密码:</td>
                        <td class="content"><input type="password" name="user_pwd"/></td>
                    </tr>
                    <tr>
                        <td class="title">角色:</td>
                        <td>
                            <input type="radio" name="user_role" value="0" checked="checked"/>管理员 
                            <input type="radio" name="user_role" value="1"/>超级管理员
                        </td>
                    </tr>
                </table>
                <div class="check_code">
                    <span style="font-size=15px">验证码：</span>
                    <img src="<c:url value="/clientSecurityMgr?act=genCode"/>" id="code" alt="验证码"/>
                    <br/>
                    <a href="javascript:changePic();" style="font-size:13px;">换一张</a>
                    <input type="text" name="checked_code" size="5"/>
                </div>
                <div class="wrapper_div">
                    <button onclick="login_check();">提 交</button>&nbsp;
                    <input type="reset" value="重 置"/>
                </div>
            </form>
            <c:if test="${!empty error}">
                <div class="error_info" style="border:1px solid yellow">
                    ${error}
                </div>
            </c:if>
        </div>
      </div>
  </body>
</html>
